import { Button, Form, Input, Select } from 'antd';
import { generateMixed } from '../utils';

interface externalTasksBaseProps {
  curElement: any;
}

export default function ExternalTasksBase(props: externalTasksBaseProps) {
  const { curElement } = props;
  const [form] = Form.useForm();
  const taskTypeValue = Form.useWatch('taskType', form);
  const onChange = (values: any) => {
    // console.log(values);
  };

  return (
    <div className="bpmn-custom-properties-content-base">
      <Form
        labelCol={{ span: 9 }}
        wrapperCol={{ span: 15 }}
        labelAlign="left"
        labelWrap={true}
        layout={'horizontal'}
        form={form}
        initialValues={{
          controlId: 'externalTask_' + generateMixed(10),
          name: '外部任务' + curElement?.businessObject?.$attrs?.index,
        }}
        onValuesChange={onChange}
      >
        <Form.Item label="任务标识" name="controlId">
          <Input />
        </Form.Item>
        <Form.Item label="任务名称" name="name">
          <Input />
        </Form.Item>
        <Form.Item label="任务类型" name="taskType">
          <Select
            options={[
              { value: '接口工厂', label: '接口工厂' },
              { value: '消息队列', label: '消息队列' },
            ]}
          />
        </Form.Item>
        {taskTypeValue == '接口工厂' && (
          <Form.Item label="绑定接口" name="layout3">
            <Button type="primary">配置</Button>
          </Form.Item>
        )}
      </Form>
    </div>
  );
}
